<template>
    <div class="bi-pagination" >
        <ul :class="boxClass">
            <li class="page-item first" v-if="layoutList.includes('first')" @click="jump(1)" :class="linkClass(pageCount==0 || current==1?'disabled':'')">
                <div class="page-link">
                    {{labelFirst}}
                </div>
            </li>

            <li class="page-item prev " v-if="layoutList.includes('prev')" @click="jump(current-1)"  :class="linkClass(pageCount==0 || current==1?'disabled':'')"  >
                <div class="page-link">
                    {{labelPrev}}
                </div>
            </li>
            
            <template v-if="layoutList.includes('pager')">
                <li class="page-item pager" v-for="page in pager" @click="jump(page)"  :class="linkClass(page==current?'active':'')"><div class="page-link">{{page}}</div></li>
            </template>
            
            <li class="page-item next" v-if="layoutList.includes('next')"  @click="jump(current+1)" :class="linkClass(pageCount==0 || current==pageCount?'disabled':'')">
                <div class="page-link">
                    {{labelNext}}
                </div>
            </li>
            <li class="page-item last" v-if="layoutList.includes('last')" @click="jump(pageCount)" :class="linkClass(pageCount==0 || current==pageCount?'disabled':'')">
                <div class="page-link">
                    {{labelLast}}
                </div>
            </li>
        </ul>
        <div class="jumper"  v-if="layoutList.includes('jumper')" >
                <input type="text" class="form-control form-control-sm" :class="jumperError?'is-invalid':''" :placeholder="labelJumper" v-model="jumper" @keyup.enter="jumperChange" @blur="jumperChange" />
            </div>
        <div class=" count" v-if="layoutList.includes('count')">
            {{countText}}
        </div>
    </div>
</template>

<script>
export default {
    emits:['update:modelValue'],
    data(){

        let layoutList = this.layout.split(',');

        return {
            jumper:'',
            jumperError:false,
            layoutList
        }
    },
    computed:{
        current:{
            get(){
                return this.modelValue;
            },
            set(val){
                this.$emit('update:modelValue',val)
            }
        },
        pager(){
            
            let start = this.current - Math.floor(this.pagerLength/2);
            
            if (start<1) start = 1;
            let end =  1;
            if (this.pageCount>0){
                end = start + this.pagerLength - 1;
                if (end>this.pageCount) end = this.pageCount;
            }
            
            let pager = [];
            if (this.pageCount>0){
                for (let i = start; i <= end; i++) {
                    pager.push(i);
                }
            }

            return pager;
        },
        boxClass(){
            let className = [];

            if (this.type=='default'){
                className.push('pagination');
                className.push('pagination-sm');
            }

            if (this.type=='button'){
                className.push('bi-pagination-button');
            }

            return className;
        },
        countText(){
           
            if (this.total && this.pageCount){
                return this.total+'条记录，共'+this.pageCount+'页';
            }

            if (this.total){
                return this.total+'条记录';
            }

            if (this.pageCount){
                return this.pageCount+'页';
            }
        },
        pageCount(){
             
            if (this.count){
                return this.count;
            }

            if (this.total && this.pageSize){
                return Math.ceil(this.total/this.pageSize);
            }

            //console.error('Mast set Count or Total-PageSize');
            return 0;
        }
    },
    methods:{
        jumperChange(){
            
            let page = parseInt(this.jumper);

            if (!isNaN(page)){
                this.jump(page);
                
            }else{
                this.jumperError = true;
            }
            
        },
        jump(page){
            this.jumperError = false;
            
            if (page>0 && page<=this.count && page!=this.current){
                this.current = page;
            }
        },
        linkClass(status){

            let className = [];

            if (status=='disabled'){
                className.push('disabled');
            }

            if (status=='active'){
                className.push('active');
            }

            if (this.type=='button'){
                className.push('btn');
                className.push('btn-sm');
                

                if (status=='active'){
                    className.push('btn-primary');
                }else{
                    className.push('btn-light');
                }

            }

            return className;
        }
    },
    props: {
        modelValue:{
            type:Number,
            default:1
        },
        count: {
            type: Number,
            default:null
        },
        total:{
            type:Number,
            default:null
        },
        pageSize:{
            type:Number,
            default:null
        },
        pagerLength:{
            type:Number,
            default:5
        },
        layout:{
            type:String,
            default:'prev,pager,next,jumper,count'
        },
        labelPrev:{
            type:String,
            default:'上一页'
        },
        labelNext:{
            type:String,
            default:'下一页'
        },
        labelFirst:{
            type:String,
            default:'首页'
        },
        labelLast:{
            type:String,
            default:'尾页'
        },
        labelJumper:{
            type:String,
            default:'跳转'
        },

        type:{
            type:String,
            default:'default' //default,button
        },
    }
}
</script>

<style>
.bi-pagination{
    display: flex;
    align-items: center;
}

.bi-pagination ul{
    margin: 0;
    padding: 0;
}

.bi-pagination .page-item{
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.bi-pagination .count{
    padding-left: 10px;
    cursor: unset;
}

.bi-pagination  .jumper{
    margin-left: 10px;
}

.bi-pagination  .jumper input{
    width:50px;
}

.bi-pagination  .jumper .form-control.is-invalid{
    padding-right: 0;
}
</style>